
import React, { useState, useEffect, useRef } from "react";
import "../Dm/Dm.css";

interface Danmaku {
  text: string;
  color: string;
  top: number;
}

const VideoDanmaku: React.FC = () => {
  const [danmakus, setDanmakus] = useState<Danmaku[]>([]);
  const [inputText, setInputText] = useState("");
  const videoRef = useRef<HTMLVideoElement>(null);
  const danmakuContainerRef = useRef<HTMLDivElement>(null);

  // 定义敏感词数组
  const sensitiveWords = ["操", "你妈"];

  const sendDanmaku = () => {
    if (inputText.trim() === "") return;
    let filteredText = inputText;
    // 检查并替换敏感词
    sensitiveWords.forEach((word) => {
      const regex = new RegExp(word, "gi");
      filteredText = filteredText.replace(regex, "*".repeat(word.length));
    });
    const randomTop =
      Math.random() * (danmakuContainerRef.current?.clientHeight || 300 - 20);
    const newDanmaku: Danmaku = {
      text: filteredText,
      color: getRandomColor(),
      top: randomTop,
    };
    setDanmakus([...danmakus, newDanmaku]);
    setInputText("");
  };

  const getRandomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (danmakus.length > 0) {
        setDanmakus((prevDanmakus) =>
          prevDanmakus.filter((d) => {
            const danmakuElement = document.querySelector(
              `[data-text="${d.text}"]`
            );
            return (
              danmakuElement && danmakuElement.getBoundingClientRect().right > 0
            );
          })
        );
      }
    }, 100);
    return () => clearInterval(interval);
  }, [danmakus]);

  return (
    <div className="relative">
      <video
        ref={videoRef}
        className="w-full h-auto"
        style={{
          width: "450px",
          height: "auto",
          margin: "25px 20px",
        }}
        controls
      >
        <source src="public\videos\bw.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div>
        <div
          // className="flex mt-2"
          id="input"
          // className="flex items-center justify-between w-full p-4 bg-gray-100 rounded shadow"
          style={{
            width: "400px",
            height: "30px",
            marginLeft: "20px",
            position: "absolute",
            top: "480px",
          }}
        >
          <input
            className="city"
            type="text"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder="发送弹幕"
            style={{ width: "300px" }}
          />
          <button onClick={sendDanmaku} className="city">
            发送
          </button>
        </div>
      </div>
      <style>{`

 .relative {
          width: 50%;
          height: 50%;
          margin: 5% 0 0 5%;

        }

                @keyframes scroll {
                    from {
                        transform: translateX(800%);
                    }
                    to {
                        transform: translateX(-300%);
                    }
                }
            `}</style>
    </div>
  );
};

export default VideoDanmaku;
    